<template>
    <el-container style="height: 100%">
        <el-header class="header" height="72px">
            <div class="title">
                <img src="" alt="">
                <h1>社会培训资源管理系统</h1>
            </div>
            <div class="tx">
                <el-dropdown>
                    <el-avatar :size="34" :src="circleUrl"></el-avatar>
                    <template #dropdown>
                        <el-dropdown-menu>
<!--                        <el-dropdown-item @click="changePass">修改密码</el-dropdown-item>-->
                        <el-dropdown-item @click="exit">退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
        <el-container style="height: calc(100% - 72px)">
            <el-aside id="aside" width="220px">
                <el-scrollbar>
                    <el-menu :default-active="this.$route.path.split('/')[2]" router>
                        <el-menu-item-group>
                            <template #title>需求申请</template>
                            <el-menu-item index="myList">我的申请表</el-menu-item>
                            <el-menu-item index="allList">所有申请表</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <template #title>需求审批</template>
                            <el-menu-item index="accomRA">住宿需求审批</el-menu-item>
                            <el-menu-item index="diningRA">用餐需求审批</el-menu-item>
                            <el-menu-item index="classroomRA">教室需求审批</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <template #title>资源状态图</template>
                            <el-menu-item index="classroomResources">教室资源状态图</el-menu-item>
                            <el-menu-item index="dormitoryResources">宿舍资源状态图</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <template #title>数据统计</template>
                            <el-menu-item index="operationReport">运营报表</el-menu-item>
                            <el-menu-item index="checkReport">结算报表</el-menu-item>
<!--                            <el-menu-item index="messageRecord">短信记录</el-menu-item>-->
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <template #title>系统管理</template>
                            <el-menu-item index="userManage">用户管理</el-menu-item>
                            <el-menu-item index="charaManage">角色管理</el-menu-item>
                            <el-menu-item index="partManage">部门管理</el-menu-item>
<!--                            <el-menu-item index="messageConfig">短信配置</el-menu-item>-->
                            <el-menu-item index="classroomData">教室资料</el-menu-item>
                            <el-menu-item index="dormitoryData">宿舍资料</el-menu-item>
                        </el-menu-item-group>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-main style="padding: 4px 0 0 1px;">
              <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import axios from "axios";

export default {
  name:'index',
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    };
  },
  methods:{
    changePass(){
      this.$message.warning("暂无此功能");
    },
    exit(){
      axios.post(this.$host+"/logout").then(() =>{
        this.$router.push("/login");
      }).catch(() =>{
        this.$message.error("退出失败!");
      })
    },
  },
  created() {
    console.log();
  }
}
</script>

<style scoped>
.header{
  box-shadow:  0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding: 0;
  display: flex;
  justify-content: space-between;
}
.tx{
  padding: 19px;
  margin-right: 29px;
}
.title{
  width: 220px;
  height: 72px;
}
.title h1{
  text-align: center;
  font-size: 20px;
  line-height: 0;
}
</style>

<style>
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#app{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.table-header{
  background: #f5f6fa!important;
  color: #000;
  font-size: 12px!important;
  line-height: 40px;
  padding: 0;
  font-weight: 400;
}
.header-title{
  margin-bottom: 20px;
}
.footer-pager{
  margin-top: 20px;
}
.center{
  display: block;
  text-align: center;
  padding-top: 9px;
}
.success{
  color: rgb(103, 194, 58);
}
.warning{
  color: rgb(230, 162, 60)
}
.error{
  color: rgb(245, 108, 108);
}
</style>
